<template>
  <div class="detail">
    <!-- 导航栏 -->
    <detail-nav-bar class="detail-nav-bar" @titleClick="titleClick" ref="nav"/>
    <scroll class="content" ref="scroll" :probe-type="3">
      <!-- 轮播图 -->
      <detail-swiper :topImgs="topImgs" />
      <!-- 商品基本信息 -->
      <detail-base-info :goodsInfo="goodsInfo" />
      <!-- 店铺信息 -->
      <detail-shop-info :shop="shopInfo" />
      <!-- 店铺图片信息 -->
      <detail-goods-info :detail-info="detailInfo"/>
      <!-- 商品参数信息 -->
      <detail-params :item-params="itemParams" ref="params"/>
      <!-- 商品评论信息 -->
      <detail-rate :rate-items="rateItem" ref="rate"/>
      <!-- 商品推荐 -->
      <goods-list :goods="recommend" ref="recommend"/>
    </scroll>
    <!-- 回到顶部 -->
    <back-top @click.native="backClick"/>
    <!-- 底部 -->
    <detail-bottom-bar @addCart="addToCart"/>
  </div>
</template>

<script>
  import {getGoodsDetail, Goods, getRecommend} from "@/network/detail"
  import DetailNavBar from './childComps/DetailNavBar'
  import DetailSwiper from './childComps/DetailSwiper'
  import DetailBaseInfo from './childComps/DetailBaseInfo'
  import DetailShopInfo from './childComps/DetailShopInfo'
  import DetailParams from './childComps/DetailParams'
  import DetailGoodsInfo from './childComps/DetailGoodsInfo'
  import DetailRate from './childComps/DetailRate'
  import DetailBottomBar from './childComps/DetailBottomBar'

  import Scroll from '@/components/common/scroll/Scroll'
  import GoodsList from '@/components/content/goods/GoodsList'
  import BackTop from "@/components/content/backTop/BackTop"

  export default {
    name: "Detail",
    components: { 
      DetailNavBar, 
      DetailSwiper,
      DetailBaseInfo,
      DetailShopInfo,
      DetailGoodsInfo,
      DetailParams,
      DetailRate,
      DetailBottomBar,
      Scroll,
      GoodsList,
      BackTop
    },
    methods: {
       // 回到顶部方法
      backClick() {
        this.$refs.scroll.scroll.scrollTo(0, 0, 500)
      },
      // 监听导航的点击
      titleClick(index) {
        this.$refs.scroll.scroll.scrollTo(0, -this.themeTopys[index], 100)
      },
      // 添加购物车
      addToCart() {
        const product = {}
        product.image = this.topImgs[0]
        product.title = this.goodsInfo.title
        product.desc = this.goodsInfo.desc
        product.price = this.goodsInfo.nowPrice
        product.iid = this.iid

        this.$store.dispatch('addCart', product).then(res=>{
          this.$toast.show(res, 1000)
        })
      }
    },
    data() {
      return {
        // 轮播图数据
        topImgs: [],
        // 商品基本信息数据
        goodsInfo: {},
        iid: null,
        // 店铺信息
        shopInfo: {},
        // 店铺图片信息
        detailInfo: {},
        // 商品参数信息
        itemParams: {},
        // 评论信息
        rateItem: {},
        // 商品推荐信息
        recommend: [],
        // 存储导航的y值
        themeTopys: [],
        currentIndex: 0
      }
    },
    created() {
      this.iid = this.$route.query.iid
      // 获取商品信息
      getGoodsDetail(this.iid).then(res=>{
        // 获取数据
        const data = res.data.result
        // 获取轮播图的数据
        this.topImgs = data.itemInfo.topImages
        // 获取商品的基本信息, 存储到Goods类中
        this.goodsInfo = new Goods(data.itemInfo, data.columns, data.shopInfo.services)
        // 获取店铺信息
        this.shopInfo = data.shopInfo
        // 获取店铺图片信息
        this.detailInfo = data.detailInfo
        // 获取商品参数信息
        this.itemParams = data.itemParams
        // 用户评价
        if(data.rate.cRate !== 0) {
          this.rateItem = data.rate.list[0]
        }
      })
      // 获取商品推荐信息
      getRecommend().then(res=>{
        this.recommend = res.data.data.list
      })
    },
    mounted() {
      
    },
    updated() {
      this.themeTopys = []

      this.themeTopys.push(0)
      this.themeTopys.push(this.$refs.params.$el.offsetTop)
      this.themeTopys.push(this.$refs.rate.$el.offsetTop)
      this.themeTopys.push(this.$refs.recommend.$el.offsetTop)
    },
  }
</script>

<style scoped>
  .detail {
    height: 100vh;
    position: relative;
    z-index: 99;
    background-color: #fff;
  }
  .content {
    height: calc(100% - 44px);
  }
</style>